import QtQuick 1.1

Rectangle {
    id: page
    width: 360
    height: 360
    color: "#343434"
    border.color: "#ffffff"


    Image {
        id: icon
        x: 12
        y: 12
        width: 80
        height: 80
        z: 1
        source: "../../../test80.png"
    }

    Rectangle {
        id: topLeftRect
        width: 64
        height: 64
        color: "#00000000"
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
        border.width: 2
        border.color: "#808080"

        MouseArea {
            id: mousearea
            anchors.fill: parent
            onClicked: page.state = ''
        }
    }

    Rectangle {
        id: middleRightRect
        x: 143
        y: 212
        width: 64
        height: 64
        color: "#00000000"
        anchors.topMargin: 212
        border.width: 2
        anchors.top: parent.top
        border.color: "#808080"
        anchors.leftMargin: 143
        anchors.left: parent.left
        MouseArea {
            id: mousearea1
            anchors.fill: parent
            onClicked: page.state = 'State1'
        }
    }

    Rectangle {
        id: topLeftRect2
        x: 239
        y: 212
        width: 64
        height: 64
        color: "#00000000"
        anchors.topMargin: 212
        border.width: 2
        anchors.top: parent.top
        border.color: "#808080"
        anchors.leftMargin: 239
        anchors.left: parent.left
        MouseArea {
            id: mousearea2
            anchors.fill: parent
            onClicked: page.state = 'State2'
        }
    }
    states: [
        State {
            name: "State1"

            PropertyChanges {
                target: icon
                x: 135
                y: 204
                source: "../../../test80.png"
            }

        },
        State {
            name: "State2"

            PropertyChanges {
                target: icon
                x: 231
                y: 204
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"; to: "State1"
            NumberAnimation {
                easing.type: Easing.OutBounce
                properties: "x,y";
                duration: 1000
            }
        },
            Transition {
                    from: "*"; to: "State2"
                    NumberAnimation {
                        properties: "x,y";
                        easing.type: Easing.InOutQuad;
                        duration: 2000
                    }
                },
            Transition {
                     NumberAnimation {
                         properties: "x,y";
                         duration: 200
                     }
                 }
            ]
}
